<template>
  <view class="calculateP">
    <u-navbar
      :is-back="true"
      :custom-back="BackM"
      title="修改计费方式"
      back-text=""
    >
    </u-navbar>
    <view
      style="
        font-size: 0.72rem;
        font-family: PingFang SC;
        font-weight: 300;
        color: #000000;
        text-align: center;
        padding: 0.3rem;
      "
    >
      -门店计费方式-
    </view>

    <view class="inputS">
      <u-form :model="form" ref="uForm">
        <u-form-item
          style="padding: 0.7rem 1rem"
          prop="intro"
          label-width="auto"
          label="计费模式:"
        >
          <view class="modal">
            <!-- <view @click="selectM(item)"  class="modal-item" v-for="(item,index) in selectList " :key="index" >
                    <image v-if="item.selectFlag==false"  style="width: 1rem;height: 1rem;margin: 0rem 0.2rem;" src="../../style/image/cargo/round.png" alt="">
                    <image v-else style="width: 1rem;height: 1rem;margin: 0rem 0.2rem;" src="../../style/image/cargo/selectRound.png" alt="">
                    <view   style="font-weight: 300; font-family: PingFang SC;">{{item.text}}</view>
                </view> -->
            <u-radio-group v-model="value" @change="radioGroupChange">
              <u-radio
                active-color="#02af74"
                v-for="(item, index) in list"
                :key="index"
                :name="item.name"
                :disabled="item.disabled"
              >
                {{ item.name }}
              </u-radio>
            </u-radio-group>
            <!-- <view class="modal-item"  >
                <image style="width: 1rem;height: 1rem;margin: 0rem 0.2rem;" src="../../style/image/cargo/round.png" alt="">
                   <image style="width: 1rem;height: 1rem;margin: 0rem 0.2rem;" src="../../style/image/cargo/selectRound.png" alt="">
                   <view style="font-weight: 300;font-family: PingFang SC;" >60分钟计费制度</view>
                </view> -->
          </view>
        </u-form-item>

        <u-form-item style="padding: 0.7rem 1rem" prop="intro" label-width="auto" label="计费单价(元):" >
		    <u-input placeholder="请填写计费单价，单位元" type="number" v-model="billingPrice"/>
		</u-form-item>
        <u-form-item style="padding: 0.7rem 1rem" prop="intro" label-width="auto" label="封顶值(元):" >
			<u-input placeholder="封顶值大于单价，小于99元" type="number" v-model="billingMaxPrice"/>
		</u-form-item>
      </u-form>
    </view>

    <view class="footP">
      <view
        @click="submitM"
        style="padding: 0.7rem; display: flex; align-items: center"
      >
        <!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
        <view style="color: white; margin-left: 0.2rem">提交</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

import { saveShopInfo } from "../../utils/uniApi";
import { saveShopAndBranchInfo } from "../../utils/uniApi";

import { AppModule } from "../../store/modules/app";

@Component
export default class extends Vue {
  public form = {
    name: "",
    intro: "",
    sex: "",
  };

  public billingPattern: any = ""; //计费方式

  public billingPrice = ""; //

  public billingMaxPrice = ""; //封顶值

  // public selectList = [
  //   {
  //     selectFlag: false,
  //     text: "30分钟计费制度",
  //   },
  //   {
  //     selectFlag: false,
  //     text: "60分钟计费制度",
  //   },
  // ];

  list = [
    {
      name: "30分钟计费制度",
      disabled: false,
    },
    {
      name: "60分钟计费制度",
      disabled: false,
    },
  ];
  // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
  value = "orange";

  // selectM(data: any) {
  //   console.log(data, "data");
  //   data.selectFlag = !data.selectFlag;

  //   this.selectList.filter((item: object, index: number) => {
  //     if (index == data.selectFlag) {
  //     }
  //   });
  // }

  radioGroupChange(data: any) {
    if (data == "30分钟计费制度") {
      this.billingPattern = 1;
    } else {
      this.billingPattern = 2;
    }
  }

  BackM() {
    uni.navigateBack({
      //返回
      delta: 1,
    });
  }

  submitM() {
	  if(this.billingPattern == ''){
		  uni.showToast({
		   title: '请选择计费模式',
		   icon:'none',
		   duration: 1000
		  });
		  return
	  }
	  if(this.billingPrice == '' || parseFloat(this.billingPrice) <= 0 || parseFloat(this.billingPrice) > 99){
		  uni.showToast({
		   title: '计费单价必须大于0小于99',
		   icon:'none',
		   duration: 1000
		  });
		  return
	  }
	  if(this.billingMaxPrice == '' || parseFloat(this.billingMaxPrice) <= parseFloat(this.billingPrice) || parseFloat(this.billingMaxPrice) > 99){
		  uni.showToast({
		   title: '封顶值必须大于单价小于99',
		   icon:'none',
		   duration: 1000
		  });
		  return
	  }

    let params = {
      billingPattern: this.billingPattern, //	计费模式（1:30分钟,2:60分钟）
      billingPrice: this.billingPrice, //	计费单价
      billingMaxPrice: this.billingMaxPrice, //计费封顶价
    };

    let form = AppModule.shopInfo;
    let obj = AppModule.profitInfo;

    Object.assign(params, form);
    Object.assign(params, obj);

    // console.log("+++++++++++++",params);
	uni.showLoading({ title: "加载中", });
    saveShopAndBranchInfo(params).then((res: any) => {
		uni.hideLoading();
	  // console.log("+++++++++++++新增商户：",JSON.stringify(res.data));
      if(res.data.code==200){
		  uni.showToast({
		    title: "新增商户成功",
		    icon: "none",
		    duration: 1000,
		  }); 
		  setTimeout(()=>{
			  uni.redirectTo({
				url: "../../pages/cargo/selectBusin",
             }); 
          },1000)
      }else{
		  uni.showToast({
		    title: "新增商户失败",
		    icon: "none",
		    duration: 1000,
		  }); 
	  }
    });
  }
}
</script>

<style scoped>
.calculateP {
  background-color: #f4f5f7;
}

.inputS {
  background-color: white;
}

.modal {
}
/* 
.modal-item :nth-child(2){
font-size: 0.7rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;
}

.modal-item :nth-child(1){
 width: 1rem;
 height: 1rem;
 padding: 0.2rem;
} */
.modal-item {
  display: flex;
  align-items: center;
}
.footP {
  position: absolute;
  bottom: 0;
  background-color: #02af74;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>